<template>
  <el-scrollbar class="container" ref="container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="省" prop="provinceId">
            <el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
              <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市" prop="cityId">
            <el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
              <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区/县" prop="countyId">
            <el-select v-model="queryParams.countyId" placeholder="请选择区/县" @change="chooseCounty" clearable>
              <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="成果图类型" prop="type">
            <el-select v-model="queryParams.type">
              <el-option v-for="item in templateType" :key="item.value" :label="item.name" :value="item.value"
                clearable></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="震级" prop="mm">
            <el-input v-model="queryParams.mm" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成图编号" prop="number">
            <el-input v-model="queryParams.number" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="出图时间" prop="time">
            <el-space>
              <el-date-picker v-model="queryParams.time" type="daterange" range-separator="~" value-format="YYYY-MM-DD"
                @change="timeChange"></el-date-picker>
            </el-space>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label=" ">
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button plain @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-divider></el-divider>

    <el-tabs v-model="activeName" @tab-change="tabChange" ref="tabs">
      <el-tab-pane label="待审核" name="0">
        <el-row :gutter="10" class="mb8" style="float:left">
          <el-col :span="1.5">
            <el-button type="primary" icon="Edit" @click="batchExamine">批量提交审核</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" icon="Delete" @click="batchDelete">批量删除</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button type="primary" icon="Upload" @click="upload">上传</el-button>
          </el-col> -->
        </el-row>
        <el-table v-loading="loading" :data="dataList" @selection-change="selectChange" stripe ref="table0">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="成图编号" align="center" prop="number">
            <template #default="{ row }">
              <el-link type="primary" :underline="false" @click="viewItem(row.attachId)" v-if="row.attachId">{{ row.number
              }}</el-link>
              <span v-else>{{ row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区县" align="center" prop="county" />
          <el-table-column label="成果图类型" align="center" prop="type">
            <template #default="{ row }">
              <span>{{ templateType.find(item => item.value == row.type)?.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="震级" align="center" prop="mm">
            <template #default="{ row }">
              <span>{{ row.mm }}级</span>
            </template>
          </el-table-column>
          <el-table-column label="制图员" align="center" prop="drawer" />
          <el-table-column label="出图时间" align="center" prop="drawDate" />
          <el-table-column label="矢量数据" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="downloadVector(row.id)">下载</el-button>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" align="center" prop="status">
            <template #default="{ row }">
              <span v-if="row.status === '0'">未提交</span>
              <span v-else>已提交</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <template v-if="row.status === '0'">
                <el-link type="primary" :underline="false" @click="reMapping(row)">重新制图</el-link>
                <el-link type="primary" :underline="false" @click="downloadImage(row.attachId)">下载图片</el-link>
                <el-link type="primary" :underline="false" @click="uploadImage(row.id)">上传图片</el-link>
                <el-link type="primary" :underline="false" @click="examineItem(row.id)">提交审核</el-link>
                <el-link type="primary" :underline="false" @click="deleteItem(row.id)">删除</el-link>
              </template>
              <template v-else>
                <el-link type="primary" :underline="false" @click="downloadImage(row.attachId)">下载图片</el-link>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
          v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" ref="pagination0" />
      </el-tab-pane>
      <el-tab-pane label="审核不通过" name="2">
        <el-table v-loading="loading" :data="dataList" @selection-change="selectChange" stripe ref="table2">
          <el-table-column label="成图编号" align="center" prop="number">
            <template #default="{ row }">
              <el-link type="primary" :underline="false" @click="viewItem(row.attachId)" v-if="row.attachId">{{ row.number
              }}</el-link>
              <span v-else>{{ row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区县" align="center" prop="county" />
          <el-table-column label="成果图类型" align="center" prop="type">
            <template #default="{ row }">
              <span>{{ templateType.find(item => item.value == row.type)?.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="提交时间" align="center" prop="source" />
          <el-table-column label="提交人" align="center" prop="submitUser" />
          <el-table-column label="审核时间" align="center" prop="checkTime" />
          <el-table-column label="审核员" align="center" prop="checkUser" />
          <el-table-column label="矢量数据" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="downloadVector(row.id)">下载</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="uploadImage(row.id)">上传图片</el-button>
              <el-button type="text" @click="examineItem(row.id)">提交审核</el-button>
              <el-button type="text" @click="deleteItem(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
          v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" ref="pagination2" />
      </el-tab-pane>
      <el-tab-pane label="审核通过" name="3">
        <el-row :gutter="10" class="mb8" style="float:left">
          <el-col :span="1.5">
            <el-button type="primary" icon="Download" @click="batchDownload">批量下载</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="dataList" @selection-change="selectChange" stripe ref="table3">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="成图编号" align="center" prop="number">
            <template #default="{ row }">
              <el-link type="primary" :underline="false" @click="viewItem(row.attachId)" v-if="row.attachId">{{ row.number
              }}</el-link>
              <span v-else>{{ row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
          <el-table-column label="区县" align="center" prop="county" />
          <el-table-column label="成果图类型" align="center" prop="type">
            <template #default="{ row }">
              <span>{{ templateType.find(item => item.value == row.type)?.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="提交时间" align="center" prop="source" />
          <el-table-column label="提交人" align="center" prop="submitUser" />
          <el-table-column label="审核时间" align="center" prop="checkTime" />
          <el-table-column label="审核员" align="center" prop="checkUser" />
          <el-table-column label="矢量数据" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="downloadVector(row.id)">下载</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button type="text" @click="downloadImage(row.attachId)">下载图片</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="margin-top: 15px" v-show="queryParams.total > 0" :total="queryParams.total"
          v-model:page="queryParams.page" v-model:limit="queryParams.rows" @pagination="getList" />
      </el-tab-pane>
    </el-tabs>
    <ResultPreview v-model:open="resultPreviewOpen" :title="title" :type="type" :data="previewData" />
    <UploadFiles v-model:open="openImage" type="image" :limit="1" @updateTable="updateTable" ref="pagination3" />
    <ViewResultImage v-model:open="resultImgOpen" :attachId="viewAttachId" />
    <UploadForm v-model:open="uploadOpen"></UploadForm>
  </el-scrollbar>
</template>
<script setup>
import { getProvince, getChildArea } from "@/api/system/division"
import { templateType } from '@/views/quickMapping/common/const'
import { getAll, getById, deletePost, submitPost, updateImage } from '@/api/quickMapping/quickMapping/resultManage'
import ResultPreview from '@/views/quickMapping/common/manualMapping/resultPreview.vue'
import UploadFiles from "@/views/businessManage/dataLoader/subject/spatialData/component/uploadFiles.vue"
import ViewResultImage from '@/views/quickMapping/common/viewResultImage'
import UploadForm from '@/views/quickMapping/quickMapping/uploadForm'


const { proxy } = getCurrentInstance()
const queryParams = ref({
  page: 1,
  rows: 10,
  total: 0
})
const activeName = ref('0')
const tabChange = (val) => {
  queryParams.value.total = 0
  dataList.value = []
  getList()
}
// 省市县
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const getProvinceData = () => {
  getProvince().then(res => {
    if (res.code == 200) {
      provinceData.value = res.data
    }
  })
}
const chooseProvince = (value) => {
  queryParams.value.cityId = null
  queryParams.value.countyId = null
  queryParams.value.city = null
  queryParams.value.county = null
  cityData.value = []
  areaData.value = []
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
  queryParams.value.province = provinceData.value.find(item => item.id === value)?.name
}
const chooseCity = (value) => {
  queryParams.value.countyId = null
  queryParams.value.county = null
  areaData.value = []
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
  queryParams.value.city = cityData.value.find(item => item.id === value)?.name
}
const chooseCounty = value => {
  queryParams.value.county = areaData.value.find(item => item.id === value)?.name
}
const timeChange = (val) => {
  queryParams.value.startTime = val[0]
  queryParams.value.endTime = val[1]
}
const loading = ref(false)
const dataList = ref([])
// 查询
const getList = () => {
  loading.value = true
  dataList.value = []
  let curStatus = activeName.value
  if (activeName.value === '0') curStatus = ''
  getAll({ ...queryParams.value, status: curStatus }).then(res => {
    if (res.data?.rows.length > 0) {
      dataList.value = res.data.rows
      queryParams.value.total = res.data.total
    }
    loading.value = false
  })
}
// 重置
const resetQuery = () => {
  queryParams.value.page = 1
  proxy.resetForm('queryRef')
  queryParams.value.province = ''
  queryParams.value.city = ''
  queryParams.value.county = ''
  queryParams.value.startTime = ''
  queryParams.value.endTime = ''
  getList()
}
// 多选
const ids = ref([])
const attachIds = ref([])
const selectChange = (selection) => {
  ids.value = selection.map(item => item.id)
  attachIds.value = selection.map(item => item.attachId)
}
// 查看
const resultImgOpen = ref(false)
const viewAttachId = ref('')
const viewItem = (attachId) => {
  // getById(id).then(res => {
  //   console.log(res)
  // })
  resultImgOpen.value = true
  viewAttachId.value = attachId
}
// 批量提交审核
const batchExamine = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  submitPost(ids.value).then(res => {
    proxy.$modal.msgSuccess('批量提交审核成功')
    getList()
  })
}
// 批量删除
const batchDelete = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  proxy.$modal.confirm('所有数据将被删除，是否确定删除？').then(() => {
    return deletePost(ids.value)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    getList()
  }).catch(() => { })
}
// 上传
const uploadOpen = ref(false)
const upload = () => {
  uploadOpen.value = true
}
// 重新制图
const resultPreviewOpen = ref(false)
const title = ref('')
const type = ref()
const previewData = ref({})
const reMapping = (item) => {
  proxy.$modal.confirm('重新制图后，原来数据将被删除，是否继续？').then(() => {
    return item
  }).then(res => {
    resultPreviewOpen.value = true
    type.value = item.type
    title.value = templateType.find(item => item.value === item.type)?.name
    previewData.value = item
  }).catch(() => { })
}
// 删除
const deleteItem = (id) => {
  proxy.$modal.confirm('所有数据将被删除，是否确定删除？').then(() => {
    return deletePost([id])
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    getList()
  }).catch(() => { })
}
// 提交审核
const examineItem = (id) => {
  submitPost([id]).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('提交审核成功')
      getList()
    }
  })
}
// 上传图片
const openImage = ref(false)
const itemId = ref('')
const uploadImage = (id) => {
  openImage.value = true
  itemId.value = id
}
const updateTable = (files) => {
  updateImage({ id: itemId.value, attachId: files[0].attachId }).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('上传图片成功！')
      getList()
    }
  })
}
watch(openImage, () => {
  if (!openImage.value) itemId.value = ''
})
// 下载图片
const downloadImage = (attachId) => {
  location.href = `${import.meta.env.VITE_APP_BASE_API}/attachment/downLoadFile?attachId=${attachId}`
}
// 批量下载
const batchDownload = () => {
  if (ids.value.length == 0) {
    proxy.$modal.msgWarning('请至少选择一条数据！')
    return
  }
  proxy.download("/attachment/downForZip/" + attachIds.value, {}, '成果管理.zip')
}
// 下载矢量数据
const downloadVector = id => {
  let name = '快速出图矢量数据'
  switch (activeName.value) {
    case '0':
      name += '-待审核'
      break;
    case '2':
      name += '-审核不通过'
      break;
    case '3':
      name += '-审核通过'
      break;
  }
  proxy.download(`/manage/drawing/downLoadShp`, { id }, name + '.zip')
}
onMounted(() => {

})
defineExpose({
  getList,
  getProvinceData
})
</script>
<style scoped lang="scss">
.container {
  min-height: 400px;
  overflow: auto;
}

.el-link {
  margin-right: 8px;
}

:deep(.el-scrollbar__view) {
  height: 100%;
}

:deep(.el-tabs__content) {
  height: calc(100% - 55px);
}
</style>